<template>
	<view class="g-main">
		<search
			v-model="search"
			:placeholder="'搜索'"
			@input="searchHandler"
			:customStyle="'background: #F5F5F5;'"
			:customSearchStyle="'background: #FFFFFF'"
			:customClass="['f-bdr-sm']"
		></search>
		<!-- 搜索列表start -->
		<scroll-view scroll-y="true" v-if="searchList.length !== 0" class="u-search-list f-bc-whilte u-list">
			<view
				class="u-item f-fz15 border-bottom sm-border f-bc-whilte"
				v-for="(item, index2) in searchList"
				:key="index2"
				@tap="selectItem(item, activeIndex)"
			>
				{{ item.name }}
			</view>
		</scroll-view>
		<!-- 搜索列表end -->
		<!-- indexListstart -->
		<scroll-view scroll-y="true" :style="{ height: `calc(100vh - 198rpx)` }" :scroll-into-view="scrollViewId" class="u-list">
			<block v-for="(list, index) in list" :key="index">
				<view class="u-item" :id="list.letter">{{ list.letter }}</view>
				<view
					class="u-item f-fz15 border-bottom sm-border f-bc-whilte"
					v-for="(item, index2) in list.data"
					:key="index2"
					@tap="selectItem(item, 1)"
				>
					{{ item.name }}
				</view>
			</block>
		</scroll-view>
		<!-- indexListend -->
		<view
			class="u-indexed-list-bar"
			:style="{ height: indexBarHeight + 'px', top: indexListTop + 'px' }"
			@touchstart="touchStart"
			@touchmove.stop="touchMove"
			@touchend.stop="touchEnd"
			@touchcancel.stop="touchCancel"
			v-if="searchList.length === 0"
		>
			<text v-for="(items, index) in list" :key="index" class="u-indexed-list-text" :style="{ height: indexBarItemHeight + 'px' }">{{ items.letter }}</text>
		</view>
		<view class="u-indexed-list-alert" v-if="touchmove && list[touchmoveIndex].letter">{{ list[touchmoveIndex].letter }}</view>
	</view>
</template>

<script>
import indexListMix from '../../mixins/indexList.js'
export default {
	mixins: [indexListMix],
	data() {
		return {
			list: [
				{
					letter: 'A',
					data: [
						{
							name: '啊公司'
						},
						{
							name: '哎公司'
						}
					]
				},
			],
			top: 0,
			indexListTop: 132,
			search: '', // 搜索关键词
			searchList: [] // 搜索列表
		};
	},
	methods: {
		/**
		 * 搜索
		 * */
		searchHandler() {
			const that = this;
			if (!that.search) {
				that.searchList = [];
				return;
			}
			let nowList = that.list;
			let search = that.search,
				searchList = [];
			nowList.forEach(ele => {
				ele.data.forEach(e => {
					if (e.cityName.includes(search)) {
						searchList.push(e);
					}
				});
			});
			that.searchList = searchList;
		},
		/**
		 * 选择
		 * */
		selectItem(item, level) {
			const that = this;
			that.activeId[level] = item.cityName;
			if (level === 0) {
				that.activeIndex = 1;
				// 请求下一级数据
			} else {
				//
				that.$emit('selected', that.activeId);
			}
		},
	}
};
</script>

<style lang="scss" scoped>
	@import url('../../common/indexList.scss');
</style>
